<template>
    <div class="Index-Page">
      <div class="div1"><img src="../../assets/1.png" style="width: 200px ;height: 56px; "/></div>
     <header>
       <el-menu theme="white" mode="horizontal">
         <el-menu-item index="1"><a href="#/zhuye">处理中心</a></el-menu-item>
         <el-submenu index="2">
           <template slot="title">我的工作台</template>
           <el-menu-item index="2-1">选项1</el-menu-item>
           <el-menu-item index="2-2">选项2</el-menu-item>
           <el-menu-item index="2-3">选项3</el-menu-item>
         </el-submenu>
         <el-menu-item index="3" style="float: right"><a href="/#/index">退出登录</a></el-menu-item>
         <el-menu-item index="1" style="float: right;color: blueviolet">欢迎回来:&nbsp{{name}}</el-menu-item>
       </el-menu>
       <div class="line"></div>
     </header>
      <aside>
        <div class="you">
        <ul v-html="menuHtml"></ul>
        </div>
      </aside>
      <section>
        <router-view></router-view>
      </section>
    </div>
</template>

<script>
    export default {
        name:'Index',
      data() {
        return {};
      },
      computed:{
            menuHtml(){
                return localStorage.menuHtml;
            },
            name(){
                return localStorage.name;
            }
      },
      methods: {
      }
    }
</script>
<style lang="less">
  *{
    box-sizing: border-box;
  }
  html,body.Index-Page{
    margin: 0;padding: 0;height: 100%;border: 0;
  }
    .Index-Page {
      @headerHeight: 50px;
      @asideWidth: 12px;
      @sectionPadding: 10px;
      > header, > aside {
        position: absolute;
        left: 0;
        top: 0;
      }
      > header {
        width: 100%;
        height: @headerHeight;
        padding-left: 200px;
        float: right;
      }
      > aside {
        width: 200px;
        height: 1000px;
        padding-top: @headerHeight+@sectionPadding;
      }
      > section {
        padding-left: 210px;
        padding-top: @headerHeight+@sectionPadding
      }
    }
  .nihao{width: 200px}
  ul,li{margin: 0;padding: 0;list-style: none;}
  li a{display: block;text-decoration: none;color: #000000}
  .diyi{width: 200px;text-align: center;background-color: #eef1f6;font-size: 20px;padding:10px 0 10px 0;}
  .dier{display: none;background-color: darkgray}
  .dier li{background-color: darkgray}
  .you li:hover>ul{display: block;}
  .div1{float:left;width: 200px;height: 56px}
  .you{height: 800px;background-color: #eef1f6; }
</style>
